<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            padding: 10px;
        }
        /* 椭圆 */
        
        .tuoyuan {
            /* 宽设为高的2倍,这样他就是一个长方体了 再设置圆的度数为50%就可以实现椭圆了 */
            width: 200px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
            margin-bottom: 30px;
        }
        /* 向上的三角形 */
        
        .sanjiao {
            /* 宽高为零 四个方向的边框实线透明色 想要那个方向的边框给那个方向的边框的添加颜色 */
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid red;
            margin-bottom: 30px;
        }
        /* 向左的三角形 */
        
        .zsj {
            /* 宽高为零 四个方向的边框实线透明色 想要那个方向的边框给那个方向的边框的添加颜色 */
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-right: 100px solid transparent;
            margin-bottom: 30px;
        }
        /* 弯尾箭头 */
        
        .f {
            /* 这个为父级盒子 */
            position: relative;
            /* 向左距离20px */
            margin-left: 20px;
            /* 向下距离30px */
            margin-bottom: 30px;
        }
        
        .sjt {
            /* 写一个三角形 */
            width: 0;
            height: 0;
            border-top: 9px solid transparent;
            border-right: 9px solid red;
        }
        
        .sjty {
            /* 这个是箭头的css样式 */
            width: 15px;
            height: 15px;
            border-radius: 50%;
            box-shadow: 0 2px 0px 0px red;
            position: absolute;
            transform: rotate(180deg);
            left: -8px;
            top: 2px;
        }
        /* 跟上面那个一样 只不过是旋转了角度 */
        
        .f1 {
            position: relative;
            margin-left: 20px;
            margin-bottom: 60px;
        }
        
        .sjt1 {
            width: 0;
            height: 0;
            border-left: 9px solid transparent;
            border-bottom: 9px solid red;
            transform: rotate(180deg);
            margin-left: -10px;
        }
        
        .sjty1 {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            box-shadow: 2px 0 0px 0px red;
            position: absolute;
            transform: rotate(100deg);
            left: -7px;
            top: -7px;
        }
        /* 弯尾箭头 */
        /* 钻石盾牌 */
        
        .dp {
            /* 三角形 */
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 30px solid red;
            position: relative;
        }
        
        .di {
            /* 三角形 */
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 100px solid red;
            margin-bottom: 30px;
        }
        /* 梯形 */
        
        .ti {
            /* 这是由三个三角形拼接而成 */
            border-bottom: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            height: 0;
            width: 100px;
        }
        
        .ping {
            height: 0;
            width: 0;
            border-bottom: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            margin-top: -100px;
            margin-left: 98px;
        }
        
        .ping1 {
            height: 0;
            width: 0;
            border-bottom: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            margin-top: -100px;
            margin-left: 50px;
            transform: rotate(180deg);
        }
        /* 砖石形 */
        
        .z {
            /* 父级盒子相对定位 */
            position: absolute;
            top: 100px;
            left: 350px;
        }
        
        .zuan2 {
            /* 梯形的css */
            border-bottom: 20px solid red;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            height: 0;
            width: 50px;
        }
        
        .s {
            /* 三角形 */
            width: 0;
            height: 0;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-top: 40px solid red;
        }
        
        .r {
            /* 这是右边的大盒子 整体右移 */
            margin-left: 300px;
            margin-top: -550px;
        }
        
        .dou {
            /* 这是个圆 */
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
        }
        
        .j {
            /* 这是个三角形 */
            width: 0;
            height: 0;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
            border-top: 60px solid #fff;
            margin-top: -60px;
            margin-left: 59px;
            transform: rotate(-20deg);
        }
        /* 聊天框 */
        
        .k {
            /* 这是一个正方形 */
            width: 150px;
            height: 75px;
            border-radius: 10px;
            background-color: red;
            margin-top: 30px;
        }
        
        .tj {
            /* 这是用css实现的三角形 */
            width: 0;
            height: 0;
            border: 15px solid transparent;
            border-right: 15px solid red;
            margin-left: -30px;
            margin-top: -50px;
        }
        /* 爆炸形状 */
        /* 思路就是这是由三个正方形旋转而来 */
        
        .bao {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 70px;
        }
        
        .bao {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 70px;
        }
        
        .bao1 {
            width: 100px;
            height: 100px;
            background-color: red;
            transform: rotate(30deg);
            margin-top: -100px;
        }
        
        .bao2 {
            width: 100px;
            height: 100px;
            background-color: red;
            transform: rotate(60deg);
            margin-top: -100px;
        }
        /* 徽章丝带 */
        /* 先写一个大圆，两三角形进行拼接 */
        
        .hui {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: red;
            margin-top: 30px;
        }
        
        .zjj {
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 50px solid red;
            margin-top: -15px;
            margin-left: -8px;
            transform: rotate(25deg);
        }
        
        .rjj {
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 50px solid red;
            margin-top: -40px;
            margin-left: 32px;
            transform: rotate(-14deg);
        }
        /* 放大镜 */
        
        .ff {
            /* 父级 */
            position: absolute;
            top: 20px;
            left: 450px;
        }
        
        .ff1 {
            /* 圆形 边框 */
            width: 60px;
            height: 60px;
            background-color: #fff;
            border: 10px solid red;
            border-radius: 50%;
        }
        
        .ff2 {
            /* 长方形 */
            width: 10px;
            height: 30px;
            background-color: red;
            margin-left: 40px;
            margin-top: -10px;
            transform: rotate(-20deg);
        }
        /* 圆锥形 */
        
        .y {
            /* 父级 */
            position: absolute;
            top: 120px;
            left: 450px;
            margin-top: 80px;
        }
        
        .yz {
            /* 圆 */
            width: 77px;
            height: 77px;
            border-radius: 50%;
            background-color: red;
            margin-left: 2px;
            margin-top: -6px;
        }
        
        .yz1 {
            /* 三角形 */
            width: 0;
            height: 0;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
            border-top: 80px solid red;
            margin-top: -35px;
        }
        /* 月亮 一个圆 */
        
        .yueliang {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 500px;
            left: 450px;
            border-radius: 50%;
            box-shadow: 20px 0 0 0 red;
        }
        /* 十字架 */
        
        .jjj {
            position: absolute;
            top: 650px;
            left: 550px;
        }
        
        .jia {
            width: 20px;
            height: 100px;
            background-color: red;
        }
        
        .jia1 {
            width: 20px;
            height: 100px;
            background-color: red;
            transform: rotate(90deg);
            margin-top: -100px;
        }
    </style>
</head>

<body>
    <!-- 椭圆 -->
    <div class="tuoyuan"></div>
    <!-- 正三角 -->
    <div class="sanjiao"></div>
    <!-- 左三角 -->
    <div class="zsj"></div>
    <!-- 双尾箭头 -->
    <div class="f">
        <div class="sjt"></div>
        <div class="sjty"></div>
    </div>
    <div class="f1">
        <div class="sjt1"></div>
        <div class="sjty1"></div>
    </div>
    <!-- 钻石盾牌 -->
    <div class="dp"></div>
    <div class="di"></div>
    <!-- 梯形 -->
    <div class="ti"></div>
    <div class="ping"></div>
    <div class="ping1"></div>
    <div class="r">
        <!-- 砖石形 -->
        <div class="z">
            <div class="zuan2"></div>
            <div class="s"></div>
        </div>
        <!-- 吃豆人 -->
        <div class="dou"></div>
        <div class="j"></div>
        <!-- 聊天框 -->
        <div class="k"></div>
        <div class="tj"></div>
        <!-- 爆炸形状 -->
        <div class="bao"></div>
        <div class="bao1"></div>
        <div class="bao2"></div>
        <!-- 徽章丝带 -->
        <div class="hui"></div>
        <div class="zjj"></div>
        <div class="rjj"></div>
        <!-- 放大镜 -->
        <div class="ff">
            <div class="ff1"></div>
            <div class="ff2"></div>
        </div>
        <!-- 圆锥形 -->
        <div class="y">
            <div class="yz"></div>
            <div class="yz1"></div>
        </div>
        <!-- 月亮 -->
        <div class="yueliang"></div>
        <div class="jjj">
            <!-- 十字架 -->
            <div class="jia"></div>
            <div class="jia1"></div>
        </div>
    </div>
</body>

</html>